<template>
  <div name="ListeningList">
    <el-card
      ><el-table :data="list" style="width: 100%">
        <el-table-column label="课程类型" prop="courseType"> </el-table-column>
        <el-table-column label="课程名称" prop="courseName"> </el-table-column>
        <el-table-column label="授课地点" prop="courseName"> </el-table-column>
        <el-table-column label="授课教师" prop="tName"> </el-table-column>
        <el-table-column label="听课时间">
          <template slot-scope="scope">
            <span>
              {{ scope.row.listenDay }} 第{{
                scope.row.listenTimeArray.join("、")
              }}节</span
            >
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button
              style="margin-right: 0.5em; margin-bottom: 0.3em"
              size="mini"
              @click="handleEdit(scope.row.id)"
              type="primary"
              >查看</el-button
            >
            <el-popconfirm
              confirm-button-text="是的"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button slot="reference" size="mini" type="danger"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="allNumber"
        @current-change="getList"
        @prev-click="getList"
        @next-click="getList"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { loadListAll, deletedetails } from "../../api/data";
export default {
  name: "ListeningList",
  data() {
    return {
      currentPage: 1,
      allNumber: 0,
      list: null,
      semester: this.$store.getters.semester,
    };
  },
  mounted() {
    this.fetchHistoryList();
  },
  methods: {
    handleEdit(id) {
      this.$router.push(`/listen/details/${id}`);
    },
    async handleDelete(id) {
      const res = await deletedetails(id);
      if (res.status === 200) {
        this.$message.success({
          duration: 1000,
          message: "删除成功",
        });
        this.fetchHistoryList();
      } else {
        this.$message.error({
          duration: 1000,
          message: "删除失败!",
        });
      }
    },
    getList(val) {
      this.currentPage = val;
      this.fetchHistoryList();
    },
    async fetchHistoryList() {
      const res = await loadListAll(0, this.currentPage, 10, this.semester);

      if (res.status === 200) {
        this.allNumber = res.data.count;
        this.list = res.data.data;
      }
    },
  },
};
</script>

<style scoped>
.el-pagination {
  margin-left: 2em;
  margin-top: 1em;
  margin-bottom: 2em;
}
</style>
